<!-- 区域组详细信息 -->
<template>
  <div>
    <a-drawer
			:title="$t('Regional-group-detail')" 
			:visible="drawerVisible"
      width="45%"
			:body-style="drawerBodyStyle"
			@close="handleCancel"
			:maskClosable="false"
		>
      <!-- 基本信息 -->
      <div class="info-title">{{$t('Base_info')}}</div>
      <a-row :gutter="25">
        <a-col :span="12">
          <div v-for="(item, index) in detailInfo" :key="index" class="info-item">
            <div>{{$store.state.language=='zh' ? item.ch_title : item.en_title}}</div>
            <div>{{item.value}}</div>
          </div>
        </a-col>
        <a-col :span="12">
          <!-- 终端 -->
          <div>{{$t('Terminal')}}：</div>
          <div class="terminal-box">
            <template v-if="terminalInfo.length!=0">
              <p v-for="(item, index) in terminalInfo" :key="index">{{item}}</p>
            </template>
            <template v-else>
              <div class="empty-data-box">
                <EmptyData />
              </div>
            </template>
          </div>
        </a-col>
      </a-row>
      <!-- 放置目标 -->
      <div class="info-title" style="margin: 10px 0">{{$t('存储区域')}}</div>
      <div style="margin-bottom:10px" v-userAuth="'D21-2'">
        <a-button type="primary" @click="openAddOperate">
          <!-- <i class="icon icon-new16f button-icon-style"></i> -->
          <!-- <Iconfont class="icon button-icon-style" type="icon-new16f"></Iconfont> -->
          {{$t('Add-new') + $t('存储区域')}}
        </a-button>
      </div>
      <a-table 
        :columns="columns"
        :loading="tableLoading"
        :dataSource="tableData"
        size="small"
        :pagination="pagination"
        :rowKey='(record) => record.id'
        :locale="defaultSetting"
        :scroll="{ y: 160 }"
        :rowClassName="(record, i) => i%2 === 1 ? 'table-even-row' : 'table-odd-row' "
        bordered
      >
        <template slot="storage_classes" slot-scope="text, record">
          <span :title="text.join(',')">
            {{ text.join(',') }}
          </span>
        </template>
        <template slot="operation" slot-scope='text, record'>
          <!-- <a-tooltip placement='top' v-userAuth="'D21-2'">
            <template slot='title'>
              <span>{{$t('Edit')}}</span>
            </template>
          <Iconfont class="icon table-operation-icon" type="icon-edit16f" @click="editPlacementTarget(record)"></Iconfont>
          </a-tooltip> -->
          <span class="j-text-main cursor-pointer" @click="editPlacementTarget(record)">{{ $t('新增标签') }}</span>
          <span class="j-text-link j-text-red margin-left-xs ml-14" @click="delPlacementTarget(record)">{{ $t('Delete') }}</span>
          <!-- <a-tooltip placement='top' v-userAuth="'D21-2'">
            <template slot='title'>
              <span>{{$t('Delete')}}</span>
            </template>
            <Iconfont class="icon table-operation-icon" type="icon-delete16f" @click="delPlacementTarget(record)"></Iconfont>
          </a-tooltip> -->
        </template>
      </a-table>

      <!-- 区域组架构图 -->
      <div class="info-title" style="display: inline-block;">{{$t('Regional-group-diagram')}}</div>
      <div class="area-flag-box">
        <!-- <div class="color-box color1"></div><span class="identify-name">{{$t('Area2')}}</span> -->
        <div class="color-box color2"></div><span class="identify-name">{{$t('Regional-group2')}}</span>
        <div class="color-box color3"></div><span class="identify-name">{{$t('Area')}}</span>
      </div>
      <a-spin :spinning="graphSpinning">
        <div class="area-structure-box">
          <AreaStructure
            :graphData="graphData"
            :chartStyle="chartStyle"
          />
          <div v-if="!graphSpinning && Object.keys(graphData).length===0" class="empty-data-box">
            <EmptyData />
          </div>
        </div>
      </a-spin>

      <!-- <div class="draw-bottom-btn">
		  	<a-button :style="{ marginRight: '8px' }" @click="handleCancel" style="width:80px">
		  		{{$t('Cancel')}}
		  	</a-button>
		  	<a-button type="primary" @click="handleCancel" style="width:80px">
		  		{{$t('Sure')}}
		  	</a-button>
		  </div> -->
    </a-drawer>

    <!-- 新增放置目标 -->
    <AddPlacementTarget 
      :visible="addPlacementTargetModal"
      :targetArea="targetArea"
      @updateGroupStoreArea="getAllStoreArea"
      @closeOperateModal="closeOperateModal"
    />

    <!-- 编辑放置目标 -->
    <EditPlacementTarget 
      :visible="editPlacementTargetModal"
      :currentPlacementTarget="currentPlacementTarget"
      :targetArea="targetArea"
      @updateGroupStoreArea="getAllStoreArea"
      @closeOperateModal="closeOperateModal"
    />

    <!-- 新增标签 -->
    <!-- <EditPlacementTarget 
      :visible="editPlacementTargetModal"
      :currentPlacementTarget="currentPlacementTarget"
      :targetArea="targetArea"
      @updateGroupStoreArea="getAllStoreArea"
      @closeOperateModal="closeOperateModal"
    /> -->

    <!-- 删除放置目标 -->
    <DelPlacementTarget 
      :visible="delPlacementTargetModal"
      :currentPlacementTarget="currentPlacementTarget"
      :targetArea="targetArea"
      @updateGroupStoreArea="getAllStoreArea"
      @closeOperateModal="closeOperateModal"
    />
    
  </div>
</template>

<script>
import EmptyData from '@/components/common/EmptyData'
import AreaStructure from '@/components/storage_mgr/object/objset/AreaStructure'
import AddPlacementTarget from '@/views/storage_mgr/object/areaOperate/AddPlacementTarget'
import EditPlacementTarget from '@/views/storage_mgr/object/areaOperate/EditPlacementTarget'
import DelPlacementTarget from '@/views/storage_mgr/object/areaOperate/DelPlacementTarget'

export default {
  name: "AreaGroupDetail",
  components: { 
    AreaStructure, AddPlacementTarget, EditPlacementTarget, DelPlacementTarget, EmptyData
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    targetArea: {
      type: Object,
      required: true,
      default: () => { return {} }
    }
  },

  data() {
    return {
      drawerVisible: false,
      drawerBodyStyle: {
        paddingBottom: '40px !important',
      },
      detailInfo: [
        {ch_title:'区域组名称：', en_title: 'Regional Group Name:', value: '-'},
        {ch_title:'区域组ID：', en_title: 'Area Group ID:', value: '-'},
        {ch_title:'领域名称：', en_title: 'Field Name:', value: '-'},
        {ch_title:'领域ID：', en_title: 'Domain ID:', value: '-'},
        {ch_title:'默认存储区域：', en_title: 'Default Storage Area:', value: '-', isShow: false},
      ],
      tableLoading: false,
      pagination: {
        defaultPageSize: 5,
        showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
        showSizeChanger:true,
        pageSizeOptions: ['5', '10', '15', '20'],
        onChange: (page, pageSize) =>  {this.selectedRowKeys = []; this.target = '';},
        buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
        // onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize
      },
      columns: [
        {title: this.$t('Storage-area'), dataIndex:'name', key:'name', ellipsis: true},
        {title: this.$t('Store-label'), dataIndex:'storage_classes', key:'storage_classes', scopedSlots:{customRender:'storage_classes'}, ellipsis: true},
        {title: this.$t('Operate'), key:'operation', scopedSlots:{customRender:'operation'}, width:100},
      ],
      tableData: [],
      defaultSetting: {emptyText:<EmptyData />},
      chartStyle: {
        width: '100%',
        height: 'calc(265px - 20px)'
      },
      graphData: {
        // id: '1',
        // type: 'second-area',
        // label: '中心主题',
        // width: 90,
        // height: 90,
        // children: [
        //   {
        //     id: '1-1-1',
        //     type: 'area-child',
        //     label: '子主题1',
        //     width: 85,
        //     height: 35,
        //   },
        //   {
        //     id: '1-1-2',
        //     type: 'area-child',
        //     label: '子主题2',
        //     width: 85,
        //     height: 35,
        //   },
        //   {
        //     id: '1-1-3',
        //     type: 'area-child',
        //     label: '子主题3',
        //     width: 85,
        //     height: 35,
        //   },
        //   {
        //     id: '1-2',
        //     type: 'second-area',
        //     label: '分支主题2',
        //     width: 100,
        //     height: 40,
        //   },
        // ],
      },
      actions: new Map([
        ["add-placement-target", () => { this.addPlacementTargetModal = false; }],
        ["edit-placement-target", () => { this.editPlacementTargetModal = false; }],
        ["del-placement-target", () => { this.delPlacementTargetModal = false; }],
      ]),
      addPlacementTargetModal: false,
      editPlacementTargetModal: false,
      delPlacementTargetModal: false,
      currentPlacementTarget: {},
      terminalInfo: [],
      graphSpinning: false,
    }
  },

  watch: {
    visible(newValue) {
      this.initBaseInfo();
      this.getTerminalInfo();
      this.getAllStoreArea();
      this.getAreaGraph();
      this.drawerVisible = newValue;
      this.columns = [
        {title: this.$t('Storage-area'), dataIndex:'name', key:'name', ellipsis: true},
        {title: this.$t('Store-label'), dataIndex:'storage_classes', key:'storage_classes', scopedSlots:{customRender:'storage_classes'}, ellipsis: true},
        {title: this.$t('Operate'), key:'operation', scopedSlots:{customRender:'operation'}, width:150},
      ];
    },
  },

  methods: {
    initBaseInfo() {
      this.detailInfo[0].value = this.targetArea.zonegroup_name; // 区域组名称
      this.detailInfo[1].value = this.targetArea.zonegroup_id; // 区域组id
      this.detailInfo[2].value = this.targetArea.realm_name // 领域名称
      this.detailInfo[3].value = this.targetArea.realm_id; // 领域id
    },

    // 获取区域组所有存储区域
    async getAllStoreArea() {
      this.tableLoading = true;
      const params = { zonegroup_id:this.targetArea.zonegroup_id };
      const res = await this.$api.areaManage.getAreaGroupStoreAreaRequest(params);
      // console.log('所有区域组存储区域', res)
      if(res && res.data && res.data.flag !== 1) {
        this.tableData = res.data.rgw_zonegroup_placement_infos.sort((a,b) => a.id - b.id);
        this.detailInfo[4].value = res.data.default_placement_name || '-'; // 默认存储区域
      }
      this.tableLoading = false;
    },

    // 获取区域组的终端信息
    async getTerminalInfo() {
      const params = { zonegroup_id:this.targetArea.zonegroup_id };
      const res = await this.$api.areaManage.getAreaGroupTerminalRequest(params);
      // console.log('获取区域组的终端信息', res)
      if(res && res.data) {
        this.terminalInfo = res.data
      }
    },

    // 获取区域组架构图
    async getAreaGraph() {
      this.graphSpinning = true;
      const params = { zonegroup_id: this.targetArea.zonegroup_id };
      const res = await this.$api.objectOverview.getAreaGraphRequest(params);
      // console.log('获取区域组架构图', res)
      let id = 1;
      let str1 = res.data.is_master===1?this.$t('Main'):'';
      let obj = {
        id: id++,
        type: 'second-area',
        label: res.data.name + str1,
        width: String(res.data.name).length * 12,
        height: 90,
        children: []
      };
      res.data.zones.forEach(item => {
        let str2 = item.is_master===1?this.$t('Main'):'';
        obj.children.push({
          id: id++,
          type: 'area-child',
          label: item.name + str2,
          width: String(item.name + str2).length * 10,
          height: 35,
        })
      })
      this.graphData = {...obj};
      this.graphSpinning = false;
    },

    //关闭详情弹窗
    handleCancel() {
      this.$emit('closeModal', 'area-group-detail');
    },

    //打开新增放置目标弹窗
    openAddOperate() {
      this.addPlacementTargetModal = true;
    },

    //打开编辑放置目标弹窗
    editPlacementTarget(record) {
      this.currentPlacementTarget = record;
      this.editPlacementTargetModal = true;
    },

    //打开删除放置目标
    delPlacementTarget(record) {
      this.currentPlacementTarget = record;
      this.delPlacementTargetModal = true;
    },

    //关闭操作弹窗
    closeOperateModal(type) {
      let action = this.actions.get(type);
      action.call(this);
    },
  },
}
</script>
<style scoped>
  .draw-bottom-btn {
		/* float: right;
		padding-bottom: 20px; */
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 4px 4px;
	}
  .info-item {
    margin-bottom: 5px;
  }
  .info-title {
    color: #333;
    font-size: 14px;
    font-weight: 700;
  }
  .terminal-box {
    height: 210px;
    padding: 10px;
    background-color: #edf0f2;
    box-sizing: border-box;
    overflow: auto;
  }
  .area-structure-box {
    height: 265px;
    padding: 10px;
    background-color: #f0f3f5;
    box-sizing: border-box;
    /* width: 664px; */
  }
  .empty-data-box {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  /* ::v-deep.ant-table-body {
    overflow: auto !important;
  } */
  .area-flag-box {
    float: right;
  }
  .identify-name {
    vertical-align: text-bottom;
    margin-right: 8px;
  }
  .color-box {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1px solid #999;
    border-radius: 2px;
    margin-right: 1px;
  }
  .color1 {
    background-color: #3c81c3;
  }
  .color2 {
    background-color: #d0e1ef;
  }
  .color3 {
    background-color: #fff;
  }
</style>